<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>旅行偏好 - NexusGo</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "background": "#ffffff",
            "primary": "#000000",
            "secondary": "#666666",
            "border": "#eeeeee",
            "card": "#ffffff",
            "hover": "#f5f5f5",
          },
          fontFamily: {
            "display": ["Plus Jakarta Sans"]
          },
          borderRadius: {
            "DEFAULT": "0.5rem",
            "lg": "0.75rem",
            "xl": "1rem",
            "full": "9999px"
          },
        },
      },
    }
  </script>
<style>
    .material-symbols-outlined {
      font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    }
  </style>
</head>
<body class="font-display bg-background text-primary">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<header class="sticky top-0 z-50 flex h-16 w-full items-center justify-between border-b border-border bg-background/80 px-4 backdrop-blur-sm sm:px-6">
<a class="flex items-center gap-2" href="#">
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
<h1 class="text-xl font-bold">NexusGo</h1>
</a>
<div class="hidden items-center gap-6 sm:flex">
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">行程规划</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">灵感发现</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">社区</a>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center rounded-full size-9 hover:bg-hover">
<span class="material-symbols-outlined text-secondary">notifications</span>
</button>
<a class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9" href="#" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAan_zgBr5IngbAJQEgbOgKip4uIbNIuMSBM_bGjPLRdEa5POUTDoP8NuJDe0fBRdvzsdEoJMlh9CrOsm-ZnBQjdQHOKEh_z0kkj4SknfhwCPADMMIAs6c69u154olZvnGKEfITJYPUa3BiUqRblWRJD2Snjjui0vNUpZOD6RpvwfgtBvQih8NVin6CZd8iktU8KdpgjKn3iQMlIu16OTaCiqkKcYfEbHo3ZjvMThllSEg7TEYBxJolfiGaTG6OC5vXvHz_KIGLpQ");'></a>
</div>
</header>
<main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-8 md:flex-row md:gap-12">
<aside class="w-full md:w-64 md:flex-shrink-0">
<div class="sticky top-24">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-16" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZ0xznA2fnvF3shTmyGNZvYENX6yJFKBoBu-0VZZRPibh6BzRj13oOEjgvGdqIH9U-4YFNavZwRF3blFJEx8RlxG8D84fsrZzXBfBicsBUZeitdSGAGUgcSCwoer36RIQmS4ydRF1NmcGAAypQeBvnlJiFmCXm1-vUWoJUMXLJU9j2-j_7O8hUl19MBqupsWPO7zKO8RyU1sjPYIVVplTxhWKeV1IWKXge-HaaRLWhb09pr-qhYO6Fx3H56j5RyRfu8toMoawnbw");'></div>
<div>
<h2 class="text-xl font-bold">Alex Chen</h2>
<p class="text-sm text-secondary">查看并编辑您的个人资料</p>
</div>
</div>
<nav class="mt-4 flex flex-col gap-1">
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">person</span>
<span class="text-sm font-medium">个人信息</span>
</a>
<a class="flex items-center gap-3 rounded-md bg-hover px-3 py-2 font-medium text-primary" href="#">
<span class="material-symbols-outlined text-base">tune</span>
<span class="text-sm">旅行偏好</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">pin_drop</span>
<span class="text-sm font-medium">打卡记录</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">dynamic_feed</span>
<span class="text-sm font-medium">发布的帖子</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">collections_bookmark</span>
<span class="text-sm font-medium">收藏内容</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">delete</span>
<span class="text-sm font-medium">回收站</span>
</a>
</nav>
</div>
</div>
</aside>
<div class="flex-1">
<div class="flex flex-col gap-8">
<div class="rounded-xl border border-border bg-card p-6">
<h3 class="text-lg font-semibold">旅行偏好设置</h3>
<p class="mt-1 text-sm text-secondary">告诉我们您喜欢什么，以便我们为您量身定制行程推荐。</p>
</div>
<div class="flex flex-col gap-8 rounded-xl border border-border bg-card p-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label class="text-sm font-medium text-primary" for="destination-type">目的地类型</label>
<p class="text-sm text-secondary">您偏爱哪种类型的风景？（可多选）</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="rounded-full border border-primary bg-primary px-4 py-2 text-sm font-medium text-background">海滩</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">山区</button>
<button class="rounded-full border border-primary bg-primary px-4 py-2 text-sm font-medium text-background">城市</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">乡村</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">历史古迹</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">国家公园</button>
</div>
</div>
<div class="h-px w-full bg-border"></div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label class="text-sm font-medium text-primary" for="travel-style">旅行方式</label>
<p class="text-sm text-secondary">您倾向于如何探索目的地？</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="rounded-full border border-primary bg-primary px-4 py-2 text-sm font-medium text-background">自驾</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">公共交通</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">飞机</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">火车</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">徒步</button>
</div>
</div>
<div class="h-px w-full bg-border"></div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label class="text-sm font-medium text-primary" for="budget">预算范围</label>
<p class="text-sm text-secondary">请选择您的人均单日预算范围。</p>
</div>
<div class="flex items-center gap-4">
<div class="flex-1">
<input class="h-1 w-full cursor-pointer appearance-none rounded-full bg-border accent-primary" max="5000" min="100" type="range" value="1500"/>
<div class="mt-2 flex justify-between text-xs text-secondary">
<span>¥100</span>
<span>¥5000+</span>
</div>
</div>
<div class="w-24 rounded-md border border-border px-3 py-2 text-center text-sm">
¥1500
</div>
</div>
</div>
<div class="h-px w-full bg-border"></div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label class="text-sm font-medium text-primary" for="accommodation-type">住宿偏好</label>
<p class="text-sm text-secondary">您喜欢哪种类型的住宿？（可多选）</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">酒店</button>
<button class="rounded-full border border-primary bg-primary px-4 py-2 text-sm font-medium text-background">民宿</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">青年旅社</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">公寓</button>
<button class="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-primary hover:bg-hover">度假村</button>
</div>
</div>
</div>
<div class="mt-2 flex justify-end gap-4">
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md h-10 px-4 bg-background border border-border text-primary text-sm font-bold leading-normal tracking-[0.015em] hover:bg-hover">
<span class="truncate">重置</span>
</button>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md h-10 px-4 bg-primary text-background text-sm font-bold leading-normal tracking-[0.015em] hover:opacity-90">
<span class="truncate">保存更改</span>
</button>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>